<template>
  <div>
    <el-container style="min-height: 100%">
      <el-aside :width="sidewith+'px'" style="background-color: rgb(238, 241, 246)" height="100%">
          <Aside :isCollapse="isCollapse" :logtextshow="logtextshow" :menus="user.menus"/>
      </el-aside>

      <el-container>
        <el-header style=" border-bottom: 1px solid #ccc">
          <Header :collapseBtnClass="collapseBtnClass" :collapse="collapse" :user="user"/>
        </el-header>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>


<script>
import Aside from "@/components/Aside";
import Header from "@/components/Header";
import user from "@/views/User.vue";

export default {
  name: 'HomeView',
  computed: {
    user() {
      return user
    }
  },
  data(){
    return{
      collapseBtnClass:'el-icon-s-fold',
      isCollapse:false,
      sidewith:200,
      logtextshow:true
    }
  },

  components:{
    Header,
    Aside
  },
  created() {
    this.getUser()
  },
  methods:{
    collapse(){//点击收缩按钮触发
      this.isCollapse =!this.isCollapse
      if(this.isCollapse){
        this.sidewith=64;
        this.collapseBtnClass='el-icon-s-unfold'
        this.logtextshow=false
      }else{
        this.sidewith=200;
        this.collapseBtnClass='el-icon-s-fold'
        this.logtextshow=true
      }
    },
    getUser(){
      let username= localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")).username : ""
      if (username){
        this.request.get("/user/username/"+username).then(res =>{
          this.user=res.data
        })
      }
    }
  }
}
</script>


<style>
</style>